<script setup lang="ts">
import { computed } from 'vue';
import type { InventorySlotItem } from '../../../../game/model/inventory/type';
import { ITEM_RARITY } from '../../../../game/data/item/type';
import { rarityTextColorClass } from '../../../../utils';

const props = withDefaults(
  defineProps<{
    equipment: InventorySlotItem | null;
  }>(),
  {
    equipment: null,
  }
);

const equip = computed(() => {
  if (!props.equipment || !props.equipment.payload?.equip) return null;
  return props.equipment.payload.equip;
});

const bgClass = computed(() => {
  switch (equip.value?.rarity) {
    case ITEM_RARITY.INFERIOR:
      return 'bg-[#84a26e]';
    case ITEM_RARITY.MEDIUM:
      return 'bg-[#5685ae]';
    case ITEM_RARITY.SUPERIOR:
      return 'bg-[#a362a8]';
    case ITEM_RARITY.SUPREME:
      return 'bg-[#cd9f56]';
    case ITEM_RARITY.IMMORTAL:
      return 'bg-[#de584f]';
    case ITEM_RARITY.PERFECT:
      return 'bg-[#f2e36c]';
    case ITEM_RARITY.INNATE:
      return 'bg-[linear-gradient(180deg,rgba(85,220,194,1)_0%,rgba(109,213,224,1)_50%)]';
    case ITEM_RARITY.TREASURE:
      return 'bg-[linear-gradient(135deg,rgba(241,227,106,1)_5%,rgba(134,204,223,1)_35%,rgba(215,170,221,1)_65%,rgba(241,178,214,1)_95%)]';
    default:
      return 'bg-[#dbdde1]';
  }
});
</script>

<template>
  <div class="w-[50px] h-[50px] text-[10px] flex items-center justify-center">
    <div :class="['w-full h-full p-[2px] rounded', bgClass]">
      <div
        :class="[
          'w-full h-full bg-container-background rounded flex items-center justify-center',
          rarityTextColorClass(equip?.rarity),
        ]"
      >
        <slot></slot>
      </div>
    </div>
  </div>
</template>
